<template>
  <div class='personal-container'>
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="信息概览">
        <user-message />
      </a-tab-pane>
      <a-tab-pane key="2" tab="修改信息" force-render>
        <change-message  />
      </a-tab-pane>
      <a-tab-pane key="3" tab="修改密码">
        <change-pass />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import userMessage from './userMessage'
import changeMessage from './changeMessage'
import changePass from './changePass'
export default {
  name: 'personal',
  components: {
    changeMessage,userMessage,changePass
  },
  data () {
    return {
      activeKey: '1'
    }
  },
  methods:{
    callback(key){
      console.log(key)
    }
  }
}
</script>

<style lang='less' scoped>
.personal-container{
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
</style>
